<template>
   <div>
       <nav-bar>
           <div slot="left" class="back" @click="backClick">
               <img src="~assets/img/common/back.svg" alt="">
           </div>
           <div slot="center" class="title">
                <div v-for="(item,index) in titles" 
                    :key="index" 
                    class="title-item"
                    @click="itemClick(index)"
                    :class="{active: index == currIndex}">{{item}}</div>
           </div>
       </nav-bar>
   </div>
</template>

<script>
    import NavBar from 'components/common/navbar/NavBar'

    export default {
        name:'DetailNavBar',
        data() {
            return {
               titles: ['商品','描述','参数','评论'],
               currIndex: 0
            }
        },
        methods: {
            itemClick(index) {
                this.currIndex = index
                this.$emit('titleClick',index);
            },
            backClick() {
                this.$router.go(-1)
            }
        },
        components: {
            NavBar
        },
        computed: {
            
        }
    }
</script>

<style scoped>
    .title {
        display: flex;
    }
    .title-item {
        flex: 1;
    }
    .active {
        color: red;
    }
    .back img{
        margin-top: 13px;
    }
</style>